{% block ubicacion_widget %}
{% spaceless %}
    <div class="control">
        <div class="oculto">
            {{ form_widget(form) }}
            {% set provincia = form.vars.id|replace({'pais': 'provincia'}) %}
            {% set ciudad = form.vars.id|replace({'pais': 'ciudad'}) %}
            {% set latitude = form.vars.id|replace({'pais': 'latitude'}) %}
            {% set longitude = form.vars.id|replace({'pais': 'longitude'}) %}
        </div>
        <input type="text" id="{{ form.vars.id }}-auto" value="" name="ubicacion_text" autocomplete="off">
        <div id="{{ form.vars.id }}-ctrLocalidad" class="control control-localidad">
            <div class="label" id="{{ form.vars.id }}-ubicacion-seleccionada" style="display: none;">Ubicación seleccionada:
                <span id="{{ form.vars.id }}-locale_name"></span>
            </div>
        </div>
        <div id="{{ form.vars.id }}-mapa-preview" class="mapa">
        </div>
    </div>
<script type="text/javascript">
$(function() {
    $("#{{ form.vars.id }}-auto").autocomplete({
        source: "{{ path('googleUbicacion') }}",
        minLength: 2,
        delay: 900,
        select: function( event, ui ) {
            $('#{{ form.vars.id }}-ubicacion-seleccionada').show();
            $('#{{ form.vars.id }}').val(ui.item.pais);
            $('#{{ provincia }}').val(ui.item.provincia);
            $('#{{ ciudad }}').val(ui.item.localidad);
            $('#{{ latitude }}').val(ui.item.lattitude);
            $('#{{ longitude }}').val(ui.item.longitude);
            $('#{{ form.vars.id }}-ctrLocalidad').show();
            $('#{{ form.vars.id }}-locale_name').html(ui.item.label);
            var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center="+ui.item.longitude+","+ui.item.lattitude+"&zoom=15&size=230x230&markers=color:red|label:P|"+ui.item.longitude+","+ui.item.lattitude;
            $('#{{ form.vars.id }}-mapa-preview').html("");
            $('#{{ form.vars.id }}-mapa-preview').append(
                $(document.createElement("img")).attr("src", image_url).attr('id','map')
            );
            $('#{{ form.vars.id }}-ctrLocalidad label').hide();
        }
    });
    
    var txtAux = new Array();
    if( $('#{{ ciudad }}').val() != "" )
        txtAux.push($('#{{ ciudad }}').val())
    if( $('#{{ provincia }}').val() != "" )
        txtAux.push($('#{{ provincia }}').val())
    if( $('#{{ form.vars.id }}').val() != "" ){
        txtAux.push($('#{{ form.vars.id }}').val());
        $('#{{ form.vars.id }}-ubicacion-seleccionada').show();
        if( $('#{{ latitude }}').val() != "" && $('#{{ longitude }}').val() != "" ){
            var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center="+$('#{{ longitude }}').val()+","+$('#{{ latitude }}').val()+"&zoom=15&size=230x230&markers=color:red|label:P|"+$('#{{ longitude }}').val()+","+$('#{{ latitude }}').val();
            $('#{{ form.vars.id }}-mapa-preview').append(
                $(document.createElement("img")).attr("src", image_url).attr('id','map')
            );
        }
    }
    $("#{{ form.vars.id }}-auto").val(txtAux.join(", "));
    $('#{{ form.vars.id }}-locale_name').html(txtAux.join(", "));
    
});
</script>

{% endspaceless %}
{% endblock %}